<template>
  <div class="home" style="background-color: white">
    <!--轮播图-->
    <BannerSwiper :data="swiperImages"></BannerSwiper>
    <!--快速跳转-->
    <QuickLinkNav :data="quickLinkImages"></QuickLinkNav>
    <!--分割线-->
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 5px' }">猜你喜欢</van-divider>
    <!--猜你喜欢-->
    <GoodsList :data="itemList" :gutterNum="5" :columnNum="2" :showDriver="false" style="margin-bottom: 56px;"/>
  </div>
</template>

<script>
import BannerSwiper from '@/components/BannerSwiper'
import QuickLinkNav from '@/components/QuickLinkNav'
import GoodsList from '@/components/GoodsList'
export default {
  name: 'home',
  components: {
    BannerSwiper,
    QuickLinkNav,
    GoodsList
  },
  data () {
    return {
      swiperImages: [], // 轮播图
      quickLinkImages: [], // 快速跳转
      itemList: [] // 猜你喜欢
    }
  },
  methods: {
    /**
     * 查询轮播图列表
     * picType 1：轮播图 2：快速链接
     */
    queryBannerList () {
      const self = this
      const param = { page: '1', limit: '50', picType: '1', sortNum: '' }
      self.axios.get('api/shop/getBannerList', { params: param }).then(resp => {
        if (resp.data.code !== '-1') {
          self.swiperImages = resp.data.data
        } else {
          self.$toast(resp.data.msg)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    /**
     * 查询快速链接列表
     * picType 1：轮播图 2：快速链接
     */
    queryQuickNavList () {
      const self = this
      const param = { page: '1', limit: '50', picType: '2', sortNum: '' }
      self.axios.get('api/shop/getQuickNavList', { params: param }).then(resp => {
        if (resp.data.code !== '-1') {
          self.quickLinkImages = resp.data.data
        } else {
          self.$toast(resp.data.msg)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    /**
     * 查询猜你喜欢列表
     * itemCategory 1:设备 2：配件
     */
    queryGuessYouLikeList () {
      const self = this
      const param = { page: '1', limit: '6', itemCategory: '1' }
      self.axios.get('api/shop/getGuessYouLikeList', { params: param }).then(resp => {
        if (resp.data.code !== '-1') {
          self.itemList = resp.data.data
        } else {
          self.$toast(resp.data.msg)
        }
      }).catch(error => {
        console.log(error)
      })
    }
  },
  mounted () {
    const self = this
    // 页面初始化加载轮播图
    self.queryBannerList()
    // 页面初始化加载快速链接
    self.queryQuickNavList()
    // 页面初始化加载猜你喜欢列表
    self.queryGuessYouLikeList()
  }
}
</script>
